import { colorUtils } from '@/utils/tool'
import { throttle } from '@/utils/system'
/** 导航栏模式 */
export type NavbarMode = 'opacity' | 'visibility'

/** 字体颜色模式 */
export type TextColorMode = 'white-to-black' | 'black-to-white'

export interface NavbarGradientOptions {
  /** 背景颜色 */
  backgroundColor: string
  /** 滚动距离阈值 */
  scrollThreshold: number
  /** 字体颜色模式 */
  textColorMode?: TextColorMode
  /** 导航栏模式：opacity(透明度渐变) | visibility(显示隐藏渐变) */
  mode?: NavbarMode
  /** 是否启用字体颜色渐变 */
  enableTextGradient?: boolean
  // 节流时间
  throttleTime?: number
}

export function useNavbarGradient(options: NavbarGradientOptions) {
  const { backgroundColor, scrollThreshold, textColorMode = 'white-to-black', mode = 'opacity', enableTextGradient = true, throttleTime = 50 } = options

  // 当前滚动距离
  const scrollTop = ref(0)

  // 用于存储最后一次滚动事件，确保滚动结束后能处理最后一次事件
  let lastScrollEvent: { scrollTop: number } | null = null
  let scrollEndTimer: ReturnType<typeof setTimeout> | null = null

  // 计算渐变进度 (0-1)
  const gradientProgress = computed(() => {
    if (scrollTop.value <= 0) return 0
    if (scrollTop.value >= scrollThreshold) return 1
    return scrollTop.value / scrollThreshold
  })

  // 计算背景颜色
  const currentBgColor = computed(() => {
    // 两种模式都使用相同的背景色计算逻辑
    if (colorUtils.isGradient(backgroundColor)) {
      // 如果是渐变色，需要特殊处理
      const opacity = gradientProgress.value
      // 简单处理：在渐变色后添加透明度遮罩
      return `linear-gradient(rgba(0,0,0,${1 - opacity}), rgba(0,0,0,${1 - opacity})), ${backgroundColor}`
    } else {
      // 普通颜色：从透明到完全不透明
      const [r, g, b] = colorUtils.parseColor(backgroundColor)
      const alpha = gradientProgress.value
      return colorUtils.toRgbaString(r, g, b, alpha)
    }
  })

  // 计算字体颜色
  const currentTextColor = computed(() => {
    // 如果禁用字体渐变，直接返回固定颜色
    if (!enableTextGradient) {
      return textColorMode === 'white-to-black' ? 'rgba(0, 0, 0, 1)' : 'rgba(255, 255, 255, 1)'
    }

    // 启用字体渐变时，根据滚动进度插值颜色
    const startColor = textColorMode === 'white-to-black' ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 0, 0, 0.9)'
    const endColor = textColorMode === 'white-to-black' ? 'rgba(0, 0, 0, 1)' : 'rgba(255, 255, 255, 1)'

    return colorUtils.interpolateColor(startColor, endColor, gradientProgress.value)
  })

  // 计算当前透明度
  const currentOpacity = computed(() => {
    // 显示隐藏模式：返回渐变进度作为透明度 // 透明度渐变模式：透明度始终为1，颜色本身包含透明度变化
    return mode === 'visibility' ? gradientProgress.value : 1
  })

  // 计算导航栏样式
  const navbarStyle = computed(() => {
    // 背景色和文字颜色都已经包含了透明度变化
    return {
      backgroundColor: currentBgColor.value,
      color: currentTextColor.value,
    }
  })
  // 处理页面滚动事件的函数 - 支付宝小程序兼容版本
  const handlePageScroll = throttle((event: { scrollTop: number }) => {
    scrollTop.value = event?.scrollTop || 0
  }, throttleTime)

  return {
    // 当前颜色值
    currentBgColor,
    currentTextColor,
    // 当前透明度
    currentOpacity,
    // 渐变进度
    gradientProgress,
    // 导航栏完整样式
    navbarStyle,
    // 当前滚动距离
    scrollTop: readonly(scrollTop),
    // 页面滚动处理函数
    handlePageScroll,
  }
}
